<!--
* @description 智慧喷淋首页
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="smart-spray">
    <div v-show="!currentAlarm">
      <div class="smart-spray__title">基础数据总览</div>
      <el-row :gutter="0">
        <el-col :span="11" class="d-flex ai-center">
          <!-- 环状图 -->
          <div ref="myChart" class="pie-chart"></div>
          <div class="place-wrap">
            <div class="place d-flex ai-center" @click="goUnitInfo">
              <i class="iconfont icon-jianzhu"></i>
              <div class="place__title">
                <div>服务场所数</div>
                <div class="place__num">1</div>
              </div>
            </div>
            <div class="d-flex ai-center">
              <div class="legend d-flex ai-center" @mouseover="mouseover(0)" @mouseout="mouseout(0)">
                <div class="legend__icon"></div>
                <div class="legend__title">住宅（0）</div>
                <div class="legend__value">0%</div>
              </div>
              <div class="legend d-flex ai-center" @mouseover="mouseover(1)" @mouseout="mouseout(1)">
                <div class="legend__icon icon2"></div>
                <div class="legend__title">重点单位（0）</div>
                <div class="legend__value">0%</div>
              </div>
            </div>
            <div class="d-flex ai-center">
              <div class="legend d-flex ai-center" @mouseover="mouseover(2)" @mouseout="mouseout(2)">
                <div class="legend__icon icon3"></div>
                <div class="legend__title">九小场所（0）</div>
                <div class="legend__value">0%</div>
              </div>
              <div class="legend d-flex ai-center" @mouseover="mouseover(3)" @mouseout="mouseout(3)">
                <div class="legend__icon icon4"></div>
                <div class="legend__title">公共场所（0）</div>
                <div class="legend__value">0%</div>
              </div>
            </div>
            <div class="d-flex ai-center">
              <div class="legend d-flex ai-center" @mouseover="mouseover(4)" @mouseout="mouseout(4)">
                <div class="legend__icon icon5"></div>
                <div class="legend__title">企业（1）</div>
                <div class="legend__value">100%</div>
              </div>
              <div class="legend d-flex ai-center"></div>
            </div>
          </div>
        </el-col>
        <!-- 设备统计 -->
        <el-col :span="13">
          <el-row :gutter="10" class="device-wrap" @click.native="goDeviceList">
            <el-col :span="2" class="col-holder"></el-col>
            <el-col :span="8" class="device d-flex ai-center">
              <div class="device-icon d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_wulianwangwangguan"></i>
              </div>
              <div class="device-title">
                <div class="device-name">物联网网关</div>
                <div class="device-num">1</div>
              </div>
            </el-col>
            <el-col :span="8" class="device d-flex ai-center">
              <div class="device-icon device-icon2 d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_dulishiyangan-01"></i>
              </div>
              <div class="device-title">
                <div class="device-name">独立式烟感</div>
                <div class="device-num">1</div>
              </div>
            </el-col>
            <el-col :span="6" class="device d-flex ai-center">
              <div class="device-icon device-icon3 d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_dulishiyangan-02"></i>
              </div>
              <div class="device-title">
                <div class="device-name">独立式温感</div>
                <div class="device-num">0</div>
              </div>
            </el-col>
            <el-col :span="2" class="col-holder"></el-col>
            <el-col :span="8" class="device d-flex ai-center">
              <div class="device-icon device-icon4 d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_yalijianceqi"></i>
              </div>
              <div class="device-title">
                <div class="device-name">压力监测器</div>
                <div class="device-num">1</div>
              </div>
            </el-col>
            <el-col :span="8" class="device d-flex ai-center">
              <div class="device-icon device-icon5 d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_shuiliujianceqi"></i>
              </div>
              <div class="device-title">
                <div class="device-name">水流监测器</div>
                <div class="device-num">1</div>
              </div>
            </el-col>
            <el-col :span="6" class="device d-flex ai-center">
              <div class="device-icon device-icon6 d-flex ai-center jc-center">
                <i class="iconfont icon-jianyipenlintubiao_shipinjiankong"></i>
              </div>
              <div class="device-title">
                <div class="device-name">视频监控</div>
                <div class="device-num">2</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div class="smart-spray__title d-flex ai-center jc-between">
        <span>当前警情数据</span>
        <el-button type="text" @click="goList">查看全部警情>></el-button>
      </div>
      <div class="d-flex table-wrap">
        <!-- 统计维度 -->
        <div class="count-wrap">
          <div
            class="count-card card1 d-flex ai-center jc-between"
            :class="{'is-active':alarmType==1}"
            @click="onAlarmTypeChange(1)"
          >
            <div>
              <div class="count-card__name">火灾报警单位</div>
              <div class="count-card__num">{{staticObj.unitWarnCount||0}}</div>
            </div>
            <i class="iconfont icon-jianyipenlintubiao_huozaibaojingdanwei"></i>
            <i class="el-icon el-icon-caret-right"></i>
          </div>
          <div
            class="count-card card2 d-flex ai-center jc-between"
            :class="{'is-active':alarmType==2}"
            @click="onAlarmTypeChange(2)"
          >
            <div>
              <div class="count-card__name">火灾预警设备</div>
              <div class="count-card__num">{{staticObj.deviceWarnCount||0}}</div>
            </div>
            <i class="iconfont icon-jianyipenlintubiao_huozaiyujingshebei"></i>
            <i class="el-icon el-icon-caret-right"></i>
          </div>
          <div
            class="count-card card3 d-flex ai-center jc-between"
            :class="{'is-active':alarmType==3}"
            @click="onAlarmTypeChange(3)"
          >
            <div>
              <div class="count-card__name">安全隐患单位</div>
              <div class="count-card__num">{{staticObj.unitFaultCount||0}}</div>
            </div>
            <i class="iconfont icon-jianyipenlintubiao_anquanyinhuandanwei"></i>
            <i class="el-icon el-icon-caret-right"></i>
          </div>
          <div
            class="count-card card4 d-flex ai-center jc-between"
            :class="{'is-active':alarmType==4}"
            @click="onAlarmTypeChange(4)"
          >
            <div>
              <div class="count-card__name">故障物联设备</div>
              <div class="count-card__num">{{staticObj.deviceFaultCount||0}}</div>
            </div>
            <i class="iconfont icon-jianyipenlintubiao_guzhangwulianshebei"></i>
            <i class="el-icon el-icon-caret-right"></i>
          </div>
        </div>
        <!-- 表格 -->
        <div class="list-wrap">
          <!-- 处置状态 -->
          <div class="card-deal__wrap d-flex">
            <div
              class="card-deal deal1 d-flex flex-column ai-center jc-center"
              :class="{ 'is-active':dealStatus==1 }"
              @click="onDealStatusChange(1)"
            >
              <div>未处置</div>
              <div class="card-deal__num">{{statusStaticObj.openCount||0}}</div>
            </div>
            <div
              class="card-deal deal2 d-flex flex-column ai-center jc-center"
              :class="{ 'is-active':dealStatus==2 }"
              @click="onDealStatusChange(2)"
            >
              <div>处置中</div>
              <div class="card-deal__num">{{statusStaticObj.handlingCount||0}}</div>
            </div>
            <div
              class="card-deal deal3 d-flex flex-column ai-center jc-center"
              :class="{ 'is-active':dealStatus==3 }"
              @click="onDealStatusChange(3)"
            >
              <div>已处置</div>
              <div class="card-deal__num">{{statusStaticObj.closeCount||0}}</div>
            </div>
          </div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item v-if="isMuilUnitUser">
              <el-select
                v-model="formInline.orgId"
                placeholder="全部业主单位"
                filterable
                clearable
                :collapse-tags="true"
                @change="getFcfStatusList();getData(1)"
              >
                <el-option
                  v-for="item in orgOptions"
                  :key="item.organizationId"
                  :label="item.shortName"
                  :value="item.organizationId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="formInline.time"
                type="datetimerange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00','23:59:59']"
                :picker-options="pickerOptions"
                @change="getData(1)"
              ></el-date-picker>
            </el-form-item>
            <el-form-item v-show="alarmType==2||alarmType==4">
              <el-select v-model="formInline.deviceStatus" placeholder="设备是否复位" clearable @change="getList(1)">
                <el-option label="未复位" value="1"></el-option>
                <el-option label="已复位" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="alarmType==2||alarmType==4">
              <el-select
                v-model="formInline.deviceIds"
                placeholder="选择设备"
                filterable
                clearable
                multiple
                :collapse-tags="true"
                @change="getData(1)"
              >
                <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-if="showTable" v-loading="loading" :data="tableData" ref="mainTable">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column v-if="alarmType>0" prop="deviceName" :label="deviceAlarmStatusMap[alarmType]+'设备'"></el-table-column>
            <el-table-column v-if="alarmType==2||alarmType==4" prop="deviceAddress" label="设备位置" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="发生时间" width="180"></el-table-column>
            <el-table-column prop="closeTime" label="持续时长" :formatter="formatDuration"></el-table-column>
            <el-table-column v-if="alarmType==2||alarmType==4" prop="deviceStatus" label="设备是否复位">
              <template v-slot="sc">{{sc.row.deviceStatus==1?'未':'已'}}复位</template>
            </el-table-column>
            <el-table-column prop="unitName" label="联网单位" show-overflow-tooltip></el-table-column>
            <el-table-column prop="unitAddress" label="单位位置" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="showDetail(scope.row)"
                  type="text"
                  size="small"
                  :disabled="scope.row.alarmStatus==3"
                >警情处置</el-button>
                <el-button @click="showDetail(scope.row,true)" type="text" size="small">查看详情</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <div class="text-center" style="padding:82px 0;">
                <img src="../../assets/images/spray/no-alarm.png" />
                <div style="color:#999;line-height:1;">暂无警情</div>
              </div>
            </template>
          </el-table>
          <el-pagination
            v-show="total>0"
            background
            @size-change="sizeChange"
            @current-change="pageChange"
            :current-page="pageIndex"
            :page-sizes="[10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align:right;"
          ></el-pagination>
        </div>
      </div>
    </div>
    <fire-alarm-detail v-if="currentAlarm" :dataObj="currentAlarm" :readonly="detailReadonly" @return="onReturn"></fire-alarm-detail>
  </div>
</template>

<script>
import {
  getAlarmListByPage,
  getAlarmStats,
  getAlarmStatusStats,
} from '@/api/spray'
import { getFcfStatusList } from '@/api/fcf'
import util from '@/utils/util'
import { mapState, mapGetters } from 'vuex'
import FireAlarmDetail from './FireAlarmDetail'
let myChart = ''
let colors = ['#4284FF', '#8F95FF', '#18C8C8', '#FEB762', '#4AE46E']
let chartInterval = ''
export default {
  components: { FireAlarmDetail },
  data() {
    return {
      deviceAlarmStatusMap: ['', '报警', '预警', '故障', '故障'],
      alarmType: 1,
      formInline: {
        orgId: '',
        time: '',
        deviceStatus: '',
        deviceIds: [],
      },
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      tableData: [{}], //表格数据
      staticObj: {
        deviceWarnCount: 0,
        deviceFaultCount: 0,
        unitWarnCount: 0,
        unitFaultCount: 0,
      },
      statusStaticObj: {
        handlingCount: 0,
        closeCount: 0,
        openCount: 0,
        totalCount: 0,
      },
      loading: false,
      pickerOptions: util.intTimePickerOptions(),
      dealStatus: 1,
      currentAlarm: '',
      detailReadonly: false,
      deviceList: [],
      showTable: true,
      currentDataIndex: 4,
    }
  },
  computed: {
    ...mapState(['orgOptions']),
    ...mapGetters(['isMuilUnitUser', 'userOrgId', 'userOrgIds']),
  },

  created() {
    this.getFcfStatusList()
    this.getData(1)
  },

  mounted() {
    this.initChart()
  },

  methods: {
    goDeviceList() {
      this.$router.push({
        name: 'equipLink',
      })
    },
    goUnitInfo() {
      this.$router.push({
        name: 'baseInfoMaintain',
      })
    },
    getFcfStatusList() {
      getFcfStatusList({
        orgIds: this.formInline.orgId ? this.formInline.orgId : this.userOrgIds,
        fbsId: 0,
        systemId: '-1',
        fcfCategoryId: '',
        fireTType: '-1',
        pageSize: 100,
        queryType: 0,
      }).then((res) => {
        this.deviceList = res.data
      })
    },
    onReturn() {
      this.currentAlarm = ''
    },
    onDealStatusChange(val) {
      this.dealStatus = val
      this.getList(1)
      this.getAlarmStatusStats()
    },
    mouseover(dataIndex) {
      if (myChart) {
        for (var i = 0; i < 5; i++) {
          if (i != dataIndex) {
            myChart.dispatchAction({ type: 'downplay', i })
          }
        }
        myChart.dispatchAction({ type: 'highlight', dataIndex })
      }
      chartInterval && clearInterval(chartInterval)
    },
    mouseout(dataIndex) {
      for (var i = 0; i < 5; i++) {
        myChart.dispatchAction({ type: 'downplay', i })
      }
      myChart.dispatchAction({ type: 'highlight', dataIndex: 4 })
      this.setChartInterval()
    },
    goList() {
      this.$router.push({
        name: 'fireAlarmList',
      })
    },
    onAlarmTypeChange(val) {
      this.alarmType = val
      this.showTable = false
      this.$nextTick(() => {
        this.showTable = true
      })
      this.getData(1)
    },
    getData(_pageIndex) {
      this.getList(_pageIndex)
      this.getStatistic()
    },
    //获取列表
    getList(_pageIndex) {
      if (_pageIndex) {
        this.pageIndex = _pageIndex
      }
      this.loading = true
      let {
        orgId,
        queryContent,
        time,
        deviceStatus,
        deviceIds,
      } = this.formInline
      getAlarmListByPage({
        orgIds: orgId ? orgId : this.userOrgIds,
        alarmType: this.alarmType == 1 || this.alarmType == 3 ? 1 : 2,
        alarmLevel: this.alarmType == 1 || this.alarmType == 2 ? 1 : 2,
        deviceIds:
          this.alarmType == 2 || this.alarmType == 4 ? deviceIds.join(',') : '',
        alarmStatus: this.dealStatus,
        deviceStatus: deviceStatus,
        beginTime: time ? time[0] : '',
        endTime: time ? time[1] : '',
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        queryContent,
      }).then((result) => {
        this.total = result.total
        this.tableData = result.data || []
        this.loading = false
      })
    },
    // 统计
    getStatistic() {
      let { orgId } = this.formInline
      getAlarmStats({
        orgIds: orgId ? orgId : this.userOrgIds,
        alarmStatus: '1,2',
      }).then((res) => {
        this.staticObj = res.data
      })
      this.getAlarmStatusStats()
    },
    getAlarmStatusStats() {
      let { orgId } = this.formInline
      getAlarmStatusStats({
        orgIds: orgId ? orgId : this.userOrgIds,
        alarmType: this.alarmType == 1 || this.alarmType == 3 ? 1 : 2,
        alarmLevel: this.alarmType == 1 || this.alarmType == 2 ? 1 : 2,
      }).then((res) => {
        this.statusStaticObj = res.data
      })
    },
    sizeChange(val) {
      //页码切换
      this.pageIndex = 1
      this.pageSize = val
      this.getList()
    },
    pageChange(val) {
      //翻页
      this.pageIndex = val
      this.getList()
    },
    showDetail(row, readonly = false) {
      this.detailReadonly = readonly
      this.currentAlarm = Object.assign({}, row)
    },
    initChart() {
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.8)',
          renderMode: 'html',
          padding: 0,
          formatter: (params) => {
            return (
              `<div class="firealarm-echarts-tooltip">` +
              `<div style="padding-bottom:4px;font-size:18px;color:#666;border-bottom:1px solid rgba(151,151,151,0.2);">${params.name}</div>` +
              `<div class="d-flex ai-center jc-between" style="padding:2px 0 0;margin-top:4px;min-width:100px;"><span style="color:#5070D0;">数量</span><span style="color:#333;">${params.value}</span></div>` +
              `<div class="d-flex ai-center jc-between" style="padding:2px 0 0;min-width:100px;"><span style="color:#5070D0;">占比</span><span style="color:#333;">${params.percent}%</span></div>` +
              `</div>`
            )
          },
        },
        legend: {
          show: false,
        },
        grid: {
          top: '0',
          left: '0',
        },
        series: [
          {
            name: '服务场所数',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
                formatter: '{b}: {c}',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: '住宅' },
              { value: 0, name: '重点单位' },
              { value: 0, name: '九小场所' },
              { value: 0, name: '公共场所' },
              { value: 1, name: '企业' },
            ],
          },
        ],
        color: colors,
      }
      myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption(option)
      myChart.dispatchAction({
        type: 'highlight',
        dataIndex: this.currentDataIndex,
      })
      this.setChartInterval()
    },
    setChartInterval() {
      // chartInterval && clearInterval(chartInterval)
      // chartInterval = setInterval(() => {
      //   this.currentDataIndex++
      //   if (this.currentDataIndex > 4) {
      //     this.currentDataIndex = 0
      //   }
      //   myChart.dispatchAction({
      //     type: 'highlight',
      //     dataIndex: this.currentDataIndex,
      //   })
      // }, 2000)
    },
    formatDuration(row, col, val) {
      let milliSeconds =
        (row.closeTime ? new Date(row.closeTime) : new Date()).getTime() -
        new Date(row.createTime).getTime()
      return util
        .getTimeDuration(parseInt(milliSeconds / 1000))
        .splice(0, 2)
        .map((m) => {
          return m.value + m.unit
        })
        .join('')
    },
  },
}
</script>
<style lang='scss'>
.firealarm-echarts-tooltip {
  padding: 8px 12px;
  border-radius: 2px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.16);
}
.smart-spray {
  &__title {
    padding: 0 0 0 15px;
    position: relative;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(80, 112, 208, 1);
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 28px;
      background: rgba(80, 112, 208, 1);
    }
  }
  .is-reset1 {
    color: rgba(253, 94, 94, 1);
  }
  .is-reset2 {
    color: rgba(71, 207, 173, 1);
  }
  .pie-chart {
    width: 374px;
    height: 300px;
  }
  .place-wrap {
    margin: 0 0 0 40px;
    width: 412px;
  }
  .place {
    margin-bottom: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    cursor: pointer;
    .iconfont {
      margin-right: 40px;
      font-size: 60px;
      color: #438cff;
    }
    &__title {
      color: #999;
    }
    &__num {
      font-size: 34px;
      color: #333;
    }
  }
  .legend {
    flex: 1;
    padding: 5px 0;
    cursor: pointer;
    &:first-child {
      margin-right: 30px;
    }
    &:hover {
      .legend__title {
        color: #333;
      }
    }
    &__icon {
      margin-right: 10px;
      width: 11px;
      height: 11px;
      border: 3px solid #4284ff;
      border-radius: 50%;
      box-sizing: border-box;
      &.icon2 {
        border-color: #8f95ff;
      }
      &.icon3 {
        border-color: #18c8c8;
      }
      &.icon4 {
        border-color: #feb762;
      }
      &.icon5 {
        border-color: #4ae46e;
      }
    }
    &__title {
      flex: 1;
      color: #666;
    }
    &__value {
      color: #333;
    }
  }
  .col-holder {
    height: 124px;
  }
  .device-wrap {
    margin-top: 25px;
    cursor: pointer;
  }
  .device {
    padding: 30px 0;
    &-icon {
      margin-right: 20px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(59, 136, 255, 1);
      color: #fff;
      .iconfont {
        font-size: 32px;
      }
      &.device-icon2 {
        background: rgba(103, 110, 255, 1);
      }
      &.device-icon3 {
        background: rgba(77, 204, 255, 1);
      }
      &.device-icon4 {
        background: rgba(74, 153, 255, 1);
      }
      &.device-icon5 {
        background: rgba(56, 191, 215, 1);
      }
      &.device-icon6 {
        background: rgba(73, 156, 255, 1);
      }
    }
    &-name {
      color: #999;
    }
    &-num {
      color: #333;
      font-size: 24px;
    }
  }
  .count-wrap {
    margin-right: 40px;
    padding: 0 0 0 14px;
    width: 374px;
  }
  .count-card {
    position: relative;
    margin: 0 0 6px 0;
    padding: 30px 50px;
    background: #f8f9fc;
    border-radius: 4px;
    cursor: pointer;
    &__name {
      font-size: 16px;
      color: #666;
    }
    &__num {
      margin-top: 15px;
      font-size: 34px;
      color: #333;
    }
    .iconfont {
      font-size: 76px;
    }
    &.card1 {
      .iconfont {
        color: rgba(255, 70, 43, 1);
      }
    }
    &.card2 {
      .iconfont {
        color: rgba(254, 145, 28, 1);
      }
    }
    &.card3 {
      .iconfont {
        color: rgba(255, 209, 13, 1);
      }
    }
    &.card4 {
      .iconfont {
        color: rgba(67, 158, 255, 1);
      }
    }
    .el-icon-caret-right {
      position: absolute;
      right: -15px;
      top: 50%;
      font-size: 24px;
      transform: translateY(-50%);
      color: transparent;
    }
    &.is-active {
      color: #fff;
      .iconfont {
        color: #fff;
      }
      .count-card__name,
      .count-card__num {
        color: #fff;
      }
      &.card1 {
        background: linear-gradient(to right, #ff462b, #fe7b71);
        .el-icon-caret-right {
          color: #fe7b71;
        }
      }
      &.card2 {
        background: linear-gradient(to right, #fe911c, #febf70);
        .el-icon-caret-right {
          color: #febf70;
        }
      }
      &.card3 {
        background: linear-gradient(to right, #ffd00c, #fee00f);
        .el-icon-caret-right {
          color: #fee00f;
        }
      }
      &.card4 {
        background: linear-gradient(to right, #439eff, #73c0ff);
        .el-icon-caret-right {
          color: #73c0ff;
        }
      }
    }
  }
  .table-wrap {
    margin-top: 20px;
  }
  .el-table {
    border-top: 1px solid #ebeef5;
  }
  .list-wrap {
    flex: 1;
  }
  .el-form {
    margin-top: 20px;
  }
  .card-deal {
    flex: 1;
    margin-right: 20px;
    position: relative;
    height: 134px;
    border: 1px solid #d9d9d9;
    color: #666;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &__num {
      color: #333;
      font-size: 34px;
    }
    &.is-active {
      &::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
      }
    }
    &.deal1 {
      &::before {
        background: #fd5e5e;
      }
    }
    &.deal2 {
      &::before {
        background: #43bcff;
      }
    }
    &.deal3 {
      &::before {
        background: #47cfad;
      }
    }
  }
}
</style>